<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
    >
      <div class="recommended" v-if="recommendedList.length > 0">
        <div class="swide">
          <van-swipe :autoplay="3000">
            <van-swipe-item v-for="(image, index) in images" :key="index">
              <img v-lazy="image?.i" />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="content">
          <RecommendedItem
            v-for="(item, index) in recommendedList"
            :key="item?.note?.id + '' + index"
            :item="item"
          />
        </div>
        <!-- <div class="msg" @click="addList">
        <span v-if="!loading">{{ msg }}</span
        ><van-icon class="icon" v-else name="replay" />
      </div> -->
      </div>
    </van-list>
  </van-pull-refresh>
</template>

<script>
import RecommendedItem from "@/components/RecommendedItem.vue";
import { Swipe, SwipeItem } from "vant";

export default {
  components: {
    RecommendedItem,
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data: () => {
    return {
      refreshing: false,
      loading: false, //底部加载
      finished: false,
      images: [],
      recommendedList: [],
      offset: 0,
      limit: 10,
    };
  },
  methods: {
    onLoad() {
      if (this.refreshing) {
        this.recommendedList = [];
        this.offset = 0;
      }
      this.getRecommendedData();
    },
    onRefresh() {
      this.finished = false;
      this.loading = true;
      this.onLoad();
    },
    getRecommendedData() {
      if (this.loading) this.offset += 10;
      this.axios
        .get(
          `${this.api.baseUrlData}/douguo/home/recommended/${this.offset}/${this.limit}`
        )
        .then((res) => {
          this.images = res.data.result.banner;
          this.recommendedList = [
            ...this.recommendedList,
            ...res.data.result.list.filter((item) => item.type == 1),
          ];
          this.$nextTick(() => {
            this.loading = false;
            this.refreshing = false;
          });
        })
        .catch((err) => {
          err;
          this.$nextTick(() => {
            this.loading = false;
            this.refreshing = false;
          });
        });
    },
  },
  created() {
    this.getRecommendedData();
  },
};
</script>

<style lang="scss" scoped>
.recommended {
  width: 100%;
  padding-bottom: 0.5rem;
  .msg {
    width: 100%;
    padding: 0.1rem 0;
    text-align: center;
    .icon {
      animation: loading 0.5s linear infinite;
      @keyframes loading {
        0% {
          transform: rotate(0);
        }
        100% {
          transform: rotate(360deg);
        }
      }
    }
  }
}
</style>